import { ref,reactive,nextTick,onMounted} from 'vue'

//表格计算高度
export function useTable( ) {
  let tableHeight = ref(0),
    tableRef = ref(null),
    cols = ref([]),
    //表格每列宽度对象集合
    columnWidth = ref({}),
    colMaxWdith = 560;

  /**
   * 根据表格容器高度设置表格高度属性
   */
  function setTableHeight(){
    nextTick(()=>{
      tableHeight.value = tableRef.value.offsetHeight-0.5;
    })
  }

  /**
   * 遍历列的所有内容，获取最宽一列的宽度
   * @param arr
   */
  function getMaxLength (arr) {
    return arr.reduce((acc, item) => {
      if (item) {
        const calcLen = getTextWidth(item)
        if (acc < calcLen) {
          acc = calcLen
        }
      }
      return acc
    }, 0)
  }
  /**
   * 使用span标签包裹内容，然后计算span的宽度 width： px
   * @param str
   */
  function getTextWidth (str) {
    let width = 0
    const html = document.createElement('span')
    html.innerText = str
    html.className = 'getTextWidth'
    document.querySelector('body').appendChild(html)
    width = document.querySelector('.getTextWidth').offsetWidth
    document.querySelector('.getTextWidth').remove()
    return width
  }
  /**
   * el-table-column 自适应列宽
   * @param tableData: 表格数据
   * @param label: 表名
   * @param prop: 表格数据
   * @param btns: 操作列按钮集合
   */
  function flexColumnWidth (tableData,label, prop, btns) {
    if (prop === 'operate'){
      let pad = 12 * btns.length,
        str = '';
      btns.forEach(item => str += item.title);

      return (getMaxLength([str]) + pad + 25);
    }
    // 1.获取该列的所有数据
    const arr = tableData.map(x => x[prop])
    arr.push(label) // 把每列的表头也加进去算


    // 2.计算每列内容最大的宽度 + 表格的内间距（依据实际情况而定）
    let width = getMaxLength(arr) + 25;
    width = width > colMaxWdith ? colMaxWdith : width;  //最大宽度560
    return width
  }

  /**
   * 获取表格列宽度
   * @param tableData 表格数据
   * @param cols 列参数
   * @param colBtns 操作列按钮参数
   */
  function setColumnWidth (tableData,cols,colBtns){
    let colWidthObj = {},
      totalW = 0; //总宽度
    //循环计算每一列
    cols.forEach(item => {
      let w = 0;
      if (item.width){
        w = item.width
      }else {
        if (item.type === 'picture'){
          w = item.hidePic ? 60 : 100;
        } else {
          //排序列，表头增加一个字的宽度
          let label = item.label;
          label += (item.sortable || item.customSort) ? '字a' : '';
          w = flexColumnWidth(tableData,label, item.prop )
        }
      }
      colWidthObj[item.prop] = w;
      totalW += w;
    });
    if (colBtns) {
      let w = flexColumnWidth(tableData,'操作', 'operate', colBtns );
      colWidthObj.operate = w;
      totalW += w;
    }

    //总宽度不足表格宽度
    let tableW = tableRef.value.clientWidth;
    if (totalW < tableW) {
      let length = cols.length + (colBtns.length ? 1 : 0),
        average = tableW/length;  //计算平均宽度
      for (let k in colWidthObj){
        let w = colWidthObj[k];
        colWidthObj[k] = w < average ? average : w;
      }
    }
    columnWidth.value = colWidthObj;
  }

  onMounted(()=>{
    setTableHeight();
  })
  return {tableHeight,tableRef,cols,columnWidth,setTableHeight, flexColumnWidth,setColumnWidth}
}
